<template>
  <page-header-wrapper>
      <a-card :bordered="false">
        <!-- 条件搜索 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="6" :sm="24">
                <a-form-item label="姓名" prop="name">
                  <a-input v-model="queryParam.name" placeholder="请输入姓名" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="状态" prop="status">
                  <a-select placeholder="请选择状态" v-model="queryParam.status" >
                    <a-select-option value="0" >未查看</a-select-option>
                    <a-select-option value="1" >已查看</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24" v-if="currentDeptId == 100">
                <a-form-item label="校区" prop="deptId">
                  <a-tree-select
                    v-model="queryParam.deptId"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptOptions"
                    placeholder="请选择校区"
                    :replaceFields="{children:'children', title:'label', key:'id', value: 'id' }	"
                    tree-default-expand-all
                  >
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作 -->
        <div class="table-operations">
          <a-button type="primary" :disabled="multiple" @click="handleDelete(1)">
            <a-icon type="edit" />批量处理
          </a-button>
          <a-button type="primary" :disabled="multiple" @click="handleDelete(2)">
            <a-icon type="del" />批量删除
          </a-button>
          <table-setting
            :style="{float: 'right'}"
            :table-size.sync="tableSize"
            v-model="columns"
            :refresh-loading="loading"
            @refresh="getList" />
        </div>
        <!-- 增加修改 -->
        <create-form
          ref="createForm"
          @ok="getList"
        />
        <!-- 数据展示 -->
        <a-table
          :loading="loading"
          :size="tableSize"
          rowKey="id"
          :columns="columns"
          :data-source="list"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :pagination="false"
          :bordered="tableBordered"
        >
            <span slot="age" slot-scope="text, record">
              {{ ageFormat(record) }}
            </span>
            <span slot="status" slot-scope="text, record">
              {{ record.status == 0 ? '未查看' : '已查看' }}
            </span>
            <span slot="operation" slot-scope="text, record">
              <a @click="handleDelete(record)">
                处理
              </a>
            </span>
        </a-table>
        <!-- 分页 -->
        <a-pagination
          class="ant-table-pagination"
          show-size-changer
          show-quick-jumper
          :current="queryParam.pageNum"
          :total="total"
          :page-size="queryParam.pageSize"
          :showTotal="total => `共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
          @change="changeSize"
        />
      </a-card>
    </page-header-wrapper>
</template>

<script>
import { listExperience, delExperience } from '@/api/manager/experience'
import CreateForm from './modules/CreateForm'
import { tableMixin } from '@/store/table-mixin'
import { treeselect } from '@/api/system/dept'
import storage from'store'

export default {
  name: 'Experience',
  components: {
    CreateForm
  },
  mixins: [tableMixin],
  data () {
    return {
      deptOptions:[],
      currentDeptId:null,
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      visible:false,
      // 查询参数
      queryParam: {
        name: null,
        status: null,
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '年龄范围',
          dataIndex: 'age',
          scopedSlots: { customRender: 'age' },
          ellipsis: true,
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '学习篮球的原因',
          dataIndex: 'reason',
          ellipsis: true,
          align: 'center'
        },{
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          ellipsis: true,
          align: 'center'
        },{
          title: '时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
          ellipsis: true,
          align: 'center'
        },
        // {
        //   title: '操作',
        //   dataIndex: 'operation',
        //   scopedSlots: { customRender: 'operation' },
        //   align: 'center'
        // }
      ],
      ageOptions:[]
    }
  },
  filters: {
  },
  created () {
    this.getDicts('age_distribution').then(response => {
      this.ageOptions = response.data
    })
    this.getList()
    this.currentDeptId= storage.get("deptId");
    this.queryParam.status = this.$route.query.status;
    this.getTreeselect();
  },
  computed: {
  },
  watch: {
  },
  methods: {
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    ageFormat (row, column) {
      return this.selectDictLabel(this.ageOptions, row.age)
    },
    close(){
      console.log('9999999')
      this.visible = false;
    },
    openModal(){
      this.visible = true;
      this.getList();
    },
    /** 查询体验申请列表 */
    getList () {
      this.loading = true
      listExperience(this.queryParam).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        name: undefined,
        age: undefined,
        phone: undefined,
        reason: undefined,
        deptId: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 处理按钮操作 */
    handleDelete (type) {
      var that = this
      const ids = this.ids
      delExperience(ids,type).then(() => {
          that.onSelectChange([], [])
          that.getList()
          that.$message.success(
            '处理成功',
            3
          )
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('manager/experience/export', {
            ...that.queryParam
          }, `experience_${new Date().getTime()}.xlsx`)
        },
        onCancel () {}
      })
    }
  }
}
</script>
